{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/express-check.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>我的快递</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="check-area">
            <el-input v-model="oddNum" placeholder="请输入你的单号" clearable></el-input>
            <el-button type="primary" @click="queryOrder">查询</el-button>
        </div>
        <div class="divide-dice"></div>
        <div class="express-tracking">
            <div class="title">物流跟踪</div>
            <div class="time-line">
                <el-timeline>
                    <el-timeline-item
                            v-for="(eState, index) in expressState"
                            :key="index"
                            :icon="eState.icon"
                            :type="eState.type"
                            :color="eState.color"
                            :size="eState.size"
                            :timestamp="eState.time">
                        {{eState.status}}
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
    </div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script>
    var that

    new Vue({
        el:'#app',
        data: {
            oddNum: '',
            expressState: []
        },
        mounted() {
            that = this  //生成vue副本
            const orderNo = window.location.href.split('orderNO=')[1]
            if(orderNo) {
                that.oddNum = orderNo
                $.post('/index/person/getexpress',{code: orderNo},function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        that.expressState = res.data.result.list
                        that.expressState[0] = Object.assign({},{size: 'large',type: 'primary', colro: '#409EFF'},that.expressState[0])
                    }
                })
            }
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            queryOrder() {
                $.post('/index/person/getexpress',{code:that.oddNum},function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        that.expressState = res.data.result.list
                        that.expressState[0] = Object.assign({},{size: 'large',type: 'primary', colro: '#409EFF'},that.expressState[0])
                    }
                },'json')
            }
        }
    });
</script>
{/block}